<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <SiderBar />
    <a-layout
      :style="{
        marginLeft: marginLeft,
        transition: marginLeft === '310px' ? 'all 0.2s' : '',
      }"
    >
      <Header />
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
// 导入侧边栏组件
import SiderBar from "@/components/Layouts/SiderBar";
// 导入头部组件
import Header from "@/components/Layouts/Header";
// 导入设置侧边栏方法
import { useSetCollapsed } from "@/components/Layouts/SiderBar/useSetCollapsed";

export default {
  name: "",
  components: {
    SiderBar,
    Header,
  },
  setup() {
    // margin-left距离
    const { marginLeft } = useSetCollapsed();
    return {
      marginLeft, // margin-left距离
    };
  },
};
</script>
<style scoped lang="less">
// #components-layout-demo-custom-trigger {
//   min-height: 100%;
// }
</style>
